<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            height: 22px;
            background-color: #de4f4f;
            border: solid 1px black;
            text-align: center;
            
            /* 设置本元素在父元素flex布局方向上的长度 */
            flex-basis: 120px;
        }
        #main{
            height: 100px;
            border: solid 1px rgb(45, 25, 138);

            /* display: flex;设置该元素为flex布局，会影响其子元素的排列方式 */
            display: flex;

            /* flex-direction:设置布局方向；
            row默认布局方向，从左向右 
            row-reverse
            column从上到下
            column-reverse从下到上*/
            flex-direction:row;

            /* justify-content:设置子元素在布局方向上的对齐方式
            flex-start 对齐开始位置
            flex-end 对齐结束位置
            center 居中对齐
            space-around 间距平分
            space-between 两端贴边，中间平分
            space-evenly 剩余间距平分*/
            justify-content: flex-start;

            /* 设置布局的子元素在垂直于方向上的对齐方式，对齐方式同上 */
            align-items: center;
        }
    </style>
</head>
<body>
    <!-- flex布局，又叫弹性布局，是html5中新出的布局方式，主要用于替代传统的float布局 -->
    <!-- section区域，文本域 -->
    <section id="main">
        <div class="box">第一块</div>
        <div class="box">第二块</div>
        <div class="box">第三块</div>
    </section>
</body>
</html>